<script lang="ts" setup>
import {onMounted, reactive, type UnwrapRef} from 'vue';
import dayjs, {Dayjs} from "dayjs";
import {getJobDetailByJobIdAPI,} from "@/apis/job.ts";
import {useRoute} from "vue-router";

//表单数据
interface FormState {
  jobId: string;
  jobStatus: string;
  jobEmployerId: string;
  jobTitle: string;
  jobType: string;
  jobSalary: string;
  jobSalaryType: string;
  jobStartDate: string;
  jobEndDate: string;
  jobWorkingHours: string;
  jobDescription: string;
  jobRequirements: string;
  jobLocation: string;
  rangeValue: [Dayjs | null, Dayjs | null];

  employerIsVerified: string,
  employerStatus: string,
  employerCompanyName: string,
  userAvatarUrl: string,
  employerCompanyIndustry: string,
  employerCompanyAddress: string,
  employerCompanyDescription: string,
  employerCompanyWebsite: string
}

const formState: UnwrapRef<FormState> = reactive({
  jobId: '',
  jobStatus: '',
  jobEmployerId: '',
  jobTitle: '',
  jobType: '',
  jobSalary: '',
  jobSalaryType: '',
  jobStartDate: '',
  jobEndDate: '',
  jobWorkingHours: '',
  jobDescription: '',
  jobRequirements: '',
  jobLocation: '',
  rangeValue: [null, null],

  employerIsVerified: '',
  employerStatus: '',
  employerCompanyName: '',
  userAvatarUrl: '',
  employerCompanyIndustry: '',
  employerCompanyAddress: '',
  employerCompanyDescription: '',
  employerCompanyWebsite: ''
});


//接收参数
const route = useRoute();
//生命周期
onMounted(() => {
  formState.jobId = route.params.jobId as string;
  getJobInfo()
})
//获取岗位信息
const getJobInfo = async () => {
  if (formState.jobId) {
    const res = await getJobDetailByJobIdAPI(formState.jobId)
    if (res.data.flag) {

      formState.jobStatus = res.data.data.jobStatus
      formState.jobEmployerId = res.data.data.jobEmployerId
      formState.jobTitle = res.data.data.jobTitle
      formState.jobType = res.data.data.jobType
      formState.jobSalary = res.data.data.jobSalary
      formState.jobSalaryType = res.data.data.jobSalaryType
      formState.jobWorkingHours = res.data.data.jobWorkingHours
      formState.jobDescription = res.data.data.jobDescription
      formState.jobRequirements = res.data.data.jobRequirements
      formState.jobLocation = res.data.data.jobLocation
      formState.jobStartDate = dayjs(res.data.data.jobStartDate).format('YYYY-MM-DD')
      formState.jobEndDate = dayjs(res.data.data.jobEndDate).format('YYYY-MM-DD')
      // 处理工作周期数据回显
      formState.rangeValue = [
        dayjs(res.data.data.jobStartDate),
        dayjs(res.data.data.jobEndDate)
      ];


    }
  }
}

//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}

</script>
<template>
  <div class="jobAndEmployerDetail">
    <div class="top">
      <a-page-header
          sub-title="岗位详情表单"
          title="返回"
          @back="() => $router.go(-1)"
      />
    </div>
    <div class="bottom">
      <a-divider orientation="left" style="color:#4D7181; font-size: 20px;">职位信息</a-divider>
      <a-descriptions :title="formState.jobTitle">
        <a-descriptions-item label="类型">{{ formState.jobType }}</a-descriptions-item>
        <a-descriptions-item label="薪资">{{ formState.jobSalary }} / {{ formState.jobSalaryType }}
        </a-descriptions-item>
        <a-descriptions-item label="地点">{{ formState.jobLocation }}</a-descriptions-item>
        <a-descriptions-item :span="1" label="工作周期">
          {{ formState.jobStartDate }} -- {{ formState.jobEndDate }}
        </a-descriptions-item>
        <a-descriptions-item :span="2" label="工作时间">
          {{ formState.jobWorkingHours }}
        </a-descriptions-item>
        <a-descriptions-item :span="3" label="职位描述">
          {{ formState.jobDescription }}
        </a-descriptions-item>
        <a-descriptions-item :span="3" label="职位要求">
          {{ formState.jobRequirements }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<style scoped>
.jobAndEmployerDetail {
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .top {
    border-bottom: 1px solid #ccc;
  }

  .bottom {
    padding: 10px 50px 50px;
  }
}


</style>
